<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
<style>
	html{
		height: 100%;
	}
	body{
		margin: 0;
		height: 100%;
		background-color:#ddd;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	#login{
		background-color: #fff;
		padding-top: 20px;
		width: 350px;
		border-radius: 5px;
	}
	p{
		color: #888;
		font-size: 20px;
		text-align: center;
		padding-bottom: 5px;
	}
	
	form{
		padding: 0 30px 15px;
	}
	
	input{display: block;
		margin: 10px 0;
		width: 100%;
		height: 40px;
		border: 1px solid #aaa;
		font-size: 15px;
	}
	input:focus {
		border:1px solid green;
	}
	#btn{
		background-color: red;
		border-radius: 10px;
		color: white;
		font-size: 20px;
	}
</style>
</head>

<body>
	<div id="login">
		<p>公寓管理后台系统</p>
		<form action="login" method="post">
			<input id="name" type="text" name = "username" placeholder="请输入用户名" >
			<p id="nameError" style="color: red;font-size: 15px;"></p>
			<input id="pas" type="password" name = "psd" placeholder="请输入密码" >
			<p id="pasError" style="color: red;font-size: 15px;"></p>
			<p id="error" style="color: red;font-size: 15px;">${error}</p>
			<input id="btn" type="submit" value="登录" >
		</form>
	</div>
</body>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script>
	var validateName = false;
	var validatePas = false;
	
	$(function() {
		$("#name").blur(function () {
			var name = $("#name").val();
			if (name == null || name == "") {
				$("#nameError").text("用户名不能为空");
			}else {
				var regName = /^[A-Za-z0-9_]+$/;
				//alert(regName.test(name));
				if (!regName.test(name)) {
					$("#nameError").text("用户名要求为英文、数字或_组合");
				}else {
					$("#nameError").text("");
					validateName = true;
				}
			}
		});
		$("#pas").blur(function () {
			var password = $("#pas").val();
			if (password == null || password == "") {
				$("#pasError").text("密码不能为空");
			}else {
				validatePas = true;
			}
		});
		$("#btn").click(function () {
			if (validateName && validatePas) {
				return true;
			}
			return false;
		});
	});
	
</script>


</html>